﻿<template>
  <el-dialog :title = 'dialogTitle' :visible.sync = 'dialogFormVisible' width = '60%' class = 'main_dialog' @close = "closeDialog"
  :close-on-click-modal = 'false' :close-on-press-escape = 'false' append-to-body>
    <el-form :model = "ruleForm" ref = "ruleForm" :label-width = 'labelWidth' :rules =  'rules' v-loading = 'dialogLoading'>
      <el-row>
        <el-col :span = '24' style = 'height:52px'>
          <el-form-item label = "连接类型：" prop = 'category'>
            <el-select placeholder = "请选择连接类型" filterable clearable v-model = 'ruleForm.category'>
              <el-option v-for = "(item, index) in sourceCategoryList" :key = 'index'
              :label = 'item.text' :value = 'item.code'></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <template v-if = "ruleForm.category !== 'Sqlite'">
          <el-col :span = '24' style = 'height:52px'>
            <el-form-item label = "目标服务器地址：" prop = 'server_addr'>
              <el-input placeholder = "请输入目标服务器地址或IP" clearable v-model = 'ruleForm.server_addr'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span = '24' style = 'height:52px'>
            <el-form-item label = "目标服务器端口号：">
              <el-input placeholder = "请输入目标服务器端口号" clearable v-model = 'ruleForm.server_port'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span = '24' style = 'height:52px'>
            <el-form-item label = "目标数据库名称：" prop = 'db_name'>
              <el-input placeholder = "请输入目标数据库名称" clearable v-model = 'ruleForm.db_name'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span = '24' style = 'height:52px'>
            <el-form-item label = "访问账号：" prop = 'id'>
              <el-input placeholder = "请输入访问账号" clearable v-model = 'ruleForm.id'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span = '24' style = 'height:52px'>
            <el-form-item label = "访问密码：" prop = 'pw'>
              <el-input placeholder = "请输入访问密码" clearable v-model = 'ruleForm.pw'></el-input>
            </el-form-item>
          </el-col>
        </template>
        <el-col :span = '24' v-else>
          <el-form-item label = "Sqlite的文件：" prop = 'sqlite_file'>
            <el-upload drag :action = 'actionUrl' :auto-upload = "true" :http-request = "submitUpload"  :file-list = 'fileList'
            list-type = 'text' :limit = "1" :on-exceed = 'onExceed' :before-remove = 'removeUpload'>
              <i class = "el-icon-upload"></i>
              <div class = "el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item class = 'form_noLeftMargin' v-if = "dialogInfo.operationType !== 'preview'">
        <el-button type = "info" @click = "resetForm ('ruleForm')">取 消</el-button>
        <el-button type = "primary" @click = "submitForm ('ruleForm')">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script src = './ConnectStrForm.js'></script>
